 
body{
	background-image: url(../../../img/login-bg1.png);
	background-position: -400px -90px;
}

/* 主要面板 */
#center-panel{
	width: 500px;
	display: flex;
	box-sizing: border-box;
	margin: auto;

	border-left: #ccc double 3px;
	border-right: #ccc double 3px;
	border-top: rgba(244,255,255,0.1) dotted 1px;
	backdrop-filter: blur(5px);
}


#main-panel{
	width: 70%;
	color: #ccc;
	margin: auto;
	height: 400px;
}


#top-desc{
	color: #ccc;
	display: inline-block;
	height: 10px;
	width: 100%;
	text-align: center;
	font-size: 50px;
	letter-spacing: 20px;
}

#input-panel{
	display: inline;
}

.input-item{
	text-align: left;
	position: relative;	
	
}

.input-desc{
	display: inline-block;	
	position: relative;
	top: 48px;
	left: 5px;
	
	font-size: 20px;
	color: #ccc;
	pointer-events: none;
	transition: 0.3s;
	
}
.input-item input{
	color: aliceblue;
	border: #ccc 1px solid;
	border-left: 0px;
	border-right: 0px;
	border-top: 0px;
	margin-top: 20px;
	height: 30px;
	width: 100%;
	background-color: rgba(200, 200, 200, 0.1);
	
}
.input-item input:active{
	background-color: rgba(200, 200, 200, 0.1);
}

.input-item input:focus{
	outline-width: 0;
}
.input-item input:-webkit-autofill,
  .input-item input:-webkit-autofill:hover,
  .input-item input:-webkit-autofill:focus,
  .input-item input:-webkit-autofill:active {
    -webkit-transition-delay: 99999s;
    -webkit-transition: color 99999s ease-out,
      background-color 99999s ease-out;
}

.check-tipper{
	position: absolute;
	top: 26px;
	right: 5px;
	font-size: 8px;
}

.check-tipper{
	overflow: hidden;
	;
}
.valid-checker{
	position: absolute;
	right: 0;
	width: 10px;
	overflow: hidden;
	white-space: nowrap;
	transition: 0.3s;
}
.valid-checker:hover{
	width: 200px;
}
#pwd-lvl-bar{
	margin-top: 20px;
}
#pwd-lvl,#pwd-lvl-base{
	width: 1px;
	height: 10px;
}
#pwd-lvl{
	background-color: #eee;
	height: 8px;
}
#pwd-lvl-base{
	width: 150px;
	position: absolute;
	border-left: 1px solid #eee;
	border-right: 3px double #eee;
}
/* 
.input-item input:focus ~ span{
	color: deeppink;
	transform: translateX(200px)
} */


#bottom-panel{
	margin-top: 30px;
	text-align: right;
}
  

input[type="button"],input[type="submit"] {
 display: inline-block;
 border-radius: 4px;
 background-color: rgba(153,184,195,0.2);
 border: 1px solid lightgray;
 color: #ccc;
 text-align: center;
 font-size: 17px;
 padding: 0px;
 width: 100px;
 height: 30px;
 cursor: pointer;
 margin: 5px;
}
input[type="button"]:hover {
	border:2px solid lightgray;
}